<template>
  <!-- 评价详情页 -->
  <div>
    <!-- 头部 -->
    <div class="headerbox">
      <div class="header">
        <p><span @click="fun1()">&lt;</span></p>
        <p>评价</p>
        <p>
          <span
            class="iconfont icon-fangdajing"
            style="margin-right: 3.467vw"
          ></span
          ><span class="iconfont icon-wenhao"></span>
        </p>
      </div>
    </div>
    <!-- 滑动条  -->
    <div class="allbox">
      <div class="all">
        <p class="up">全部</p>
        <p class="mid">最新评价</p>
        <p class="upp">图片</p>
        <p class="down">全部消费</p>
        <p class="upp">差评</p>
      </div>
    </div>
    <!-- 灰色条 -->
    <div class="grey"></div>
    <!-- 黄色提示字 -->
    <div class="txtbox">
      <div class="txt">
        ——<span class="iconfont icon-weixiao"></span>
        上百种模型识别 为你展示真实评价
        <span class="iconfont icon-gantanhaozhong"></span>——
      </div>
    </div>
    <!-- 评价开始 -->
    <!-- 模拟数据 mock -->
    <div class="pjcontbox">
      <div class="bixbox" v-for="(v, i) in arr" :key="i">
        <div class="pjcont">
          <div class="left">
            <img :src="v.imgsrc3" alt="" @click="fun()" />
          </div>
          <div class="right">
            <div class="pjname">兔子</div>
            <div class="data">发布于9月24日</div>
            <div class="startdf">
              打分
              <img class="start" src="mayingshuang/imgs/star.jpg" alt="" />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt="" />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt="" />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt="" />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt="" />
            </div>
            <p class="page">
              {{ v.p }}
            </p>
            <div class="pjpic">
              <img :src="v.imgsrc" alt="" />
              <img :src="v.imgsrc2" alt="" />
            </div>
          </div>
        </div>
        <div class="down">
          <p class="le"><span class="iconfont icon-weixiao"></span>有帮助</p>
          <p class="ri">
            <span class="iconfont icon-pingjia"></span
            ><span class="iconfont icon-fenxiang"></span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    axios.request("http://localhost:8889/Sevaluate").then((ok) => {
      console.log(ok);
      this.arr = ok.data;
    });
  },
  methods: {
    fun() {
      this.$router.push("/personalhome");
    },
    fun1() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.headerbox {
  width: 100%;
  margin-top: 2.667vw;
  position: sticky;
  top: 0vw;
  background-color: white;
  .header {
    width: 91.733vw;
    margin: auto;
    display: flex;
    justify-content: space-between;
    height: 8vw;
    line-height: 8vw;
    font-size: 4.267vw;
    span {
      font-size: 6.133vw;
    }
  }
}
.allbox {
  width: 100%;
  .all {
    margin: auto;
    width: 91.733vw;
    display: flex;
    text-align: center;
    line-height: 7.2vw;
    margin-top: 2.4vw;
    font-size: 2.4vw;
    .up {
      width: 13.333vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #ffeee7;
      color: #f68f7e;
      margin-right: 1.333vw;
    }
    .upp {
      width: 13.333vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #f6f6f6;
      // color: #f68f7e;
      margin-right: 1.333vw;
    }
    .mid {
      width: 25.6vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #f6f6f6;
      margin-right: 1.333vw;
    }
    .down {
      width: 20.267vw;
      height: 7.2vw;
      border-radius: 2.667vw;
      background-color: #f6f6f6;
    }
  }
}

.grey {
  width: 100%;
  height: 2.8vw;
  background-color: #f6f6f6;
  margin-top: 4vw;
}
.txtbox {
  width: 100%;
  .txt {
    width: 76.267vw;
    height: 5.333vw;
    line-height: 5.333vw;
    font-size: 2.133vw;
    color: #e0b579;
    text-align: center;
    margin: auto;
    margin-top: 5.333vw;
    span {
      font-size: 4.8vw;
      color: #e0b579;
    }
  }
}
.pjcontbox {
  width: 100%;
  .down {
    width: 91.733vw;
    margin: auto;
    justify-content: space-between;
    font-size: 2.667vw;
    display: flex;
    .le {
      width: 17.333vw;
      display: flex;
      justify-content: space-around;
      border: 0.267vw solid grey;
      border-radius: 2.667vw;
      p {
        font-size: 4.8vw;
        width: 5.333vw;
        height: 8vw;
      }
    }
    .ri {
      span {
        margin: 1.333vw;
      }
    }
  }
  .pjcont {
    margin: auto;
    display: flex;
    justify-content: space-around;
    padding-bottom: 2.133vw;
    border-bottom: 0.267vw solid #f7f7f7;
    margin-top: 4vw;
  }
  .left {
    img {
      width: 10.667vw;
      height: 10.667vw;
      border-radius: 50%;
    }
  }
  .right {
    margin-left: 1.6vw;
    font-size: 2.667vw;
    .pjname {
      color: #899396;
    }
    .data {
      color: #999999;
    }
    .startdf {
      img {
        width: 3.733vw;
        vertical-align: middle;
      }
    }
    .page {
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .pjpic {
      margin-top: 2.667vw;
      img {
        width: 26.667vw;
        height: 24vw;
      }
    }
  }
}
</style>